<template>
	<div>
		<van-nav-bar :title="$t('message.global.exchange')" left-text="" :right-text="$t('message.global.rule')" left-arrow @click-right="onClickright"  @click-left="onClickLeft" />
        <div style="height: 2.625rem;"></div>
       <div class="double">
            <h3>{{$t('message.global.HerocraftTwice')}}</h3>
            <p><span>{{$t('message.global.thebet')}}</span></p>
            
        </div>       
		<div class="texcenter">
		    <p style="margin-top: 0.3375rem;">{{$t('message.global.currentperiod')}}{{cycle_out}}</p>		    
		</div>	
		<div class="doulist">		   
		    <div class="doublecen">
		        <div class="doublespan" v-if='datalist.length>0'> 
					 <div class="card" :class="back" @click="clickImg('1',arr[0],datalist[0].id)" style="height: 6.53125rem;width: 4.375rem;text-align:center">
						<div class="face front">
							
							<img src="../images/doublejoy/bou8@2x1.png" style="height: 6.53125rem;width: 4.375rem;" alt="">							
						</div>
						<div class="face back">							
							<img :src="img[arr[0]]" style="height: 6.53125rem;width: 4.375rem;" class=""> 
							<p class="imgspan">
								<img :src="datalist[0].icon" alt="">
								<br>
								{{datalist[0].cn_title}}</p>
						</div>						
					</div>
					
					<div class="card" :class="backOne" @click="clickImg('2',arr[1],datalist[1].id)" style="height: 6.53125rem;width: 4.375rem;text-align:center">
						<div class="face1 front1">
							<img src="../images/doublejoy/bou8@2x.png" style="height: 6.53125rem;width: 4.375rem;;" alt="">	

						</div>
						<div class="face1 back1">
							<img :src="img[arr[1]]" style="height: 6.53125rem;width: 4.375rem;" class=""> 
							<p class="imgspan1" >
								<img :src="datalist[1].icon" alt="">
								<br>
								{{datalist[1].cn_title}}</p>
						</div>
					</div> 
					<div class="card" :class="backTwo" @click="clickImg('3',arr[2],datalist[2].id)" style="height: 6.53125rem;width: 4.375rem;text-align:center">
						<div class="face2 front2">
							<img src="../images/doublejoy/bou8@2x.png" style="height: 6.53125rem;width: 4.375rem;;" alt="">							
						</div>
						<div class="face2 back2">
							<img :src="img[arr[2]]" style="height: 6.53125rem;width: 4.375rem;" class="">
							<p class="imgspan2" >
								<img :src="datalist[2].icon" alt="">
								<br>
								{{datalist[2].cn_title}}</p> 
						</div>
					</div> 
					<div class="card" :class="backThree" @click="clickImg('4',arr[3],datalist[3].id)" style="height: 6.53125rem;width: 4.375rem;text-align:center">
						<div class="face3 front3">
							<img src="../images/doublejoy/bou8@2x.png" style="height: 6.53125rem;width: 4.375rem;;" alt="">							
						</div>
						<div class="face3 back3">
							<img :src="img[arr[3]]" style="height: 6.53125rem;width: 4.375rem;" class=""> 
							<p class="imgspan3" >
								<img :src="datalist[3].icon" alt="">
								<br>
								{{datalist[3].cn_title}}</p>
						</div>
					</div>  					
		            
						</div>  
		    </div>
		

		</div>
		<div class="texcenter " style="margin-bottom: 0rem;">
            <p class="texcenterpp">{{$t('message.global.theamount')}}</p>
            
        </div>
        <div class="beshu">
            <p>{{$t('message.global.multiple')}}</p>
			

            <van-stepper v-model="value" @plus="plus" @minus='minus' :min="flip_card_min_times"  :max="flip_card_max_times" />
        </div>
         <div class="beshumoney">
            <p>{{$t('message.global.sum')}}</p>
			
            <p v-if="ishead"> {{probability}}.0000 Clock</p>
            <p v-else> -- Clock</p>

        </div>
		<div class="texcenter " style="margin-bottom: 0rem;">
            <p class="texcenterpp">{{$t('message.global.Winaprize')}}</p>
            
        </div>
        <p v-if="ishead" class="chag">{{probability}}.0000 Clock</p>
        <p v-else class="chag">-- Clock</p>
        <div class="chanbottom">
            <p>
                <span>{{$t('message.global.lossper')}}</span>
                <span>{{ ishead?odds:'--'}}x</span>
            </p>
            <p></p>
            <p>
                <span>{{$t('message.global.probability')}}</span>
                <span>{{ ishead?percent:'--'}}%</span>
            </p>
        </div>
        <div class="doublebottom" @click="confirmChange()" >{{$t('message.global.thechange')}}</div>
        
        <div style="height: 1.25rem;width: 100%; "></div>
	</div>
</template>

<script>
 	import img1 from '../images/doublejoy/b8@2x11.png'
 	import img2 from '../images/doublejoy/b9@2x11.png'
 	import img3 from '../images/doublejoy/b10@2x11.png'
 	import img4 from '../images/doublejoy/b11@2x11.png'
	export default {
		data() {
			return {
				newpassword: '',
				againpassword: '',
				value:1,
				back:'back',
				backOne:'backOne',
				backTwo:'backTwo',
				backThree:'backThree',
				num:0,
				img:[img1, img2, img3,img4],
				datalist:[],
				arr:[],
				probability:10.0000,
				numprobability:0,
				datares:'',
				odds:'',
				percent:'25',
				cycle_out:'',
				system_choose_id:'',
				numtype:'',
				buy:{
					data:[],					
  					"ratio": '',					
  					"security_password": ""
				},
				cycle_ts:''	,
				istrue:true	,
				ishead:false,
				uid:[],
				flip_card_max_times:'',
				flip_card_min_times:'1'		
			}
		},
		mounted() {
			this.init()
			this.getRandom(0,4)
			// 安卓调取h5方法成功跳转
			window.succeedSkip = this.succeedSkip
			window.beDefeated = this.beDefeated
		},
		methods: {
			// 路由跳转，接口跳转成功h5跳转到首页
			succeedSkip(){				
				this.istrue=true
				this.$router.push({
						path: '/doublejoy'							
				})
			},
			//  失败
			beDefeated(){				
				this.istrue=true
			},
			// 确认兑换
			confirmChange(){				
												
				    var that=this
				if(this.num==0){
						this.$toast({
                      message: this.$t('message.global.turncard'),
                     duration: 800 
				  })
				  that.istrue=true
				
				}else{	
						this.buy.ratio=this.value
						// 确认兑换安卓调取h5 ，h5传值给安卓走接口
						var ua = navigator.userAgent.toLowerCase();
						if(/iphone|ipad|ipod/.test(ua)) {
							window.webkit.messageHandlers.confirmChange.postMessage(JSON.stringify(this.buy));		
						// if((typeof jsObj)!="undefined"){
								
						// 	jsObj.confirmChange(JSON.stringify(this.buy))
						// }else{
						
						// }
					  } else if(/android/.test(ua)) {					
						if((typeof jsObj)!="undefined"){					   	
						  jsObj.confirmChange(JSON.stringify(this.buy))					  
						}else{				   	
							
						}												    
						}
					// this.$post('member/flip_card/buy',that.buy)
					// .then((res)=>{
					// 	that.istrue=true
					// })
					
					// .catch((error)=>{						
					// 	this.$notify(this.$error[error.response.data.code])
					// })
				}
				
			},
			// 图片随机
			getRandom(min,max)                                                 //开始取数
                {                                                                                                                                                                              //随机数
                    var random = Math.random()*(max-min)+min;                                                                               //向下取整
                    random = Math.floor(random);
                 
                    if(this.arr.length < 4)                         //判断数组长度
                    {   
                        for(var i=0;i<=this.arr.length;i++)             //遍历数组。
                        {
                            if(random==this.arr[i])                    //比较随机数
                            {   
                                break;
                            }
                            else                               
                            {
                                if(i==this.arr.length)
                                {this.arr.push(random);break;}
                            }
						};
						
                        this.getRandom(0,4);
                    }
                     
				},
				// 增加按钮
				plus(){
					
					
					if(this.num==0){
						this.probability=this.numprobability*(this.value+1)
					}else{
						this.probability=this.uid.length*this.numprobability*(this.value+1)
					}
					// 判断点击次数调取确认兑换接口
					
				},
				// 减少按钮
				minus(){
					if(this.num==0){
						this.probability=this.numprobability*(this.value-1)
					}else{
					   this.probability=this.uid.length*this.numprobability*(this.value-1)
					}
					// this.probability=this.probability/(this.value) 
				},
			// 点击img翻转
			clickImg(e,b,id){	
				
				  this.uid.push(e)
					// console.log(this.uid)
			
					if(this.uid.length>=2){
						
						for(var i=0;i<this.uid.length;i++){
							for(var j=i+1;j<this.uid.length;j++){
								if(this.uid[i]==this.uid[j]){
									this.uid.splice(j,1);//改变原数组
									j--;
								}
							}
						}

						
					}
					
				// if(this.num=='0'){
				// 	 this.uid.push(e)					
				// }else{
					 	
				// }
				// if(this.id==id){
					
				// }			
				this.ishead=true
				this.numtype=e
				this.num++
				// flip_card_id* 知识小卡片id
				// cycle* 开奖期数
				// card_type 卡牌类型 1：黑桃；2：梅花；3：红桃；4：方块
				// price 每注价格
				// ratio 投注倍数
				// system_choose_id 本期系统id
				// console.log(this.num)
				var card_type;   //上传花色
				var list=[]
				if(this.uid.length<4){
					this.probability=this.value*this.uid.length*this.numprobability									
					if(e=='1'){
					 this.back='card-flipped'
						if(b==0){
							card_type=1
						}else if(b==1){
							card_type=3
						}else if(b==2){
							card_type=2
						}else{
							card_type=4
						}
						this.buy.data.push({
							"flip_card_id":id,
							
							"card_type":card_type,
							
						})
					}else if(e=='2'){
						this.backOne='card-flipped1'
						if(b==0){
							card_type=1
						}else if(b==1){
							card_type=3
						}else if(b==2){
							card_type=2
						}else{
							card_type=4
						}
						this.buy.data.push({
							"flip_card_id":id,
							
							"card_type":card_type,
							
						})
					}else if(e=='3'){
						this.backTwo='card-flipped2'
						if(b==0){
							card_type=1
						}else if(b==1){
							card_type=3
						}else if(b==2){
							card_type=2
						}else{
							card_type=4
						}
						this.buy.data.push({
							"flip_card_id":id,
							
							"card_type":card_type,
							
						})
					}else if(e=='4'){					
						this.backThree='card-flipped3'
						if(b==0){
							card_type=1
						}else if(b==1){
							card_type=3
						}else if(b==2){
							card_type=2
						}else{
							card_type=4
						}
						this.buy.data.push({

							"flip_card_id":id,
							// "cycle_ts":this.cycle_ts,
							"card_type":card_type,
							
						})
					}
				if(this.uid.length=='1'){
					this.odds=this.datares.flip_card_pay_1
					this.percent='25'
				}else if(this.uid.length=='2'){					
					this.odds=this.datares.flip_card_pay_2
					this.percent='50'
				}else{
					this.odds=this.datares.flip_card_pay_3
					this.percent='75'
				}	
				}else{
					this.$toast(this.$t('message.global.canonlyflip'));
				}
								
							
			},
		    /*返回*/
			onClickLeft() {
				this.$router.go(-1)
			},
			/*开奖查询*/
			onClickright(){			    
			    this.$router.push({
                            path: '/regulation',                          
                        })
			},
			init(){
				
				this.$get('member/flip_card/knowledge_card')
				.then((res)=>{
					this.datalist=res					
				})
				// 调取赔率
				this.$get('/member/setting/get_setting')
				.then((res)=>{
					this.datares=res
					this.odds=res.flip_card_pay_1
					this.probability=Number(res.flip_card_price)					
					this.numprobability=Number(res.flip_card_price)	
					 this.flip_card_max_times=res.flip_card_max_times
				     this.flip_card_min_times=res.flip_card_min_times			
				})
				// 获取本期开奖时间 
				 this.$get('member/flip_card/record',{
                         'page':1,
                         "per_page":2,
                         "status":1
					 })
					 .then((res)=>{
						 this.system_choose_id=res.items[0].id
						 this.cycle_out= this.$Format(res.items[0].cycle_ts*1000)
						 this.cycle_ts=res.items[0].cycle_ts						 
					 })
					 .catch((error)=>{
                         if (error.response.status == 401) {
                             var ua = navigator.userAgent.toLowerCase();
                                if(/iphone|ipad|ipod/.test(ua)) {
									 window.webkit.messageHandlers.appTokenInvalid.postMessage('1');	
                                // if((typeof jsObj)!="undefined"){
                                        
                                //     jsObj.appTokenInvalid()
                                // }else{                               
                                // }
                            } else if(/android/.test(ua)) {					
                                if((typeof jsObj)!="undefined"){					   	
                                jsObj.appTokenInvalid()					  
                                }else{				   	                                   
                                }                            
                         }
                         }
                    })
			}
			
		}
	}
</script>

<style scoped>
	.card {
		perspective: 1000;
	    -webkit-perspective: 1000;
	    width: 100%;
	    margin-top: 1.25rem;
		
	}
	.imgspan,.imgspan1,.imgspan2,.imgspan3{
		margin-top: -4.3125rem;
		color:rgba(159, 1, 17, 1);
		font-size: .5rem
	}
	.imgspan img{
		width: 1.2rem;
		height: 1.3125rem;
		display: inline-block;
		padding-bottom: .125rem
	}
	.imgspan1 img{
		width: 1.2rem;
		height: 1.3125rem;
		display: inline-block;
		padding-bottom: .125rem
	}
	.imgspan2 img{
		width: 1.2rem;
		height: 1.3125rem;
		display: inline-block;
		padding-bottom: .125rem
	}
	.imgspan3 img{
		width: 1.2rem;
		height: 1.3125rem;
		display: inline-block;
		padding-bottom: .125rem
	}
	.face{
	    position: absolute;
	    border-radius:5px;
	    -webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    transition: all 1s ease;
	    backface-visibility: hidden;
	    -ms-backface-visibility: hidden;
	    -moz-backface-visibility: hidden;
	    -webkit-backface-visibility: hidden;
	    -o-backface-visibility: hidden;
		z-index: 30;	    
	}
	.face1{
	    position: absolute;
	    border-radius:5px;
	    -webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    transition: all 1s ease;
	    backface-visibility: hidden;
	    -ms-backface-visibility: hidden;
	    -moz-backface-visibility: hidden;
	    -webkit-backface-visibility: hidden;
	    -o-backface-visibility: hidden;	
		z-index: 30;    
	}
	.face2{
	    position: absolute;
	    border-radius:5px;
	    -webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    transition: all 1s ease;
	    backface-visibility: hidden;
	    -ms-backface-visibility: hidden;
	    -moz-backface-visibility: hidden;
	    -webkit-backface-visibility: hidden;
	    -o-backface-visibility: hidden;
		z-index: 30;	    
	}
	.face3{
	    position: absolute;
	    border-radius:5px;
	    -webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    transition: all 1s ease;
	    backface-visibility: hidden;
	    -ms-backface-visibility: hidden;
	    -moz-backface-visibility: hidden;
	    -webkit-backface-visibility: hidden;
	    -o-backface-visibility: hidden;	
		z-index: 30;    
	}
	.front {
	    z-index: 10;
	}
	.back{
	    transform:rotate3d(0,1,0,-180deg);
	    -ms-transform:rotate3d(0,1,0,-180deg);	/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,-180deg);	/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,-180deg); /* Safari 和 Chrome */
	    -o-transform:rotateY(0,1,0,-180deg);	/* Opera */
	    z-index: 8;
	}
	.imgspan{
		 transform:rotate3d(0,1,0,-180deg);
	    -ms-transform:rotate3d(0,1,0,-180deg);	/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,-180deg);	/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,-180deg); /* Safari 和 Chrome */
	    -o-transform:rotateY(0,1,0,-180deg);	/* Opera */
	    z-index: 8;
	}
	.imgspan1{
		 transform:rotate3d(0,1,0,-180deg);
	    -ms-transform:rotate3d(0,1,0,-180deg);	/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,-180deg);	/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,-180deg); /* Safari 和 Chrome */
	    -o-transform:rotateY(0,1,0,-180deg);	/* Opera */
	    z-index: 8;
	}
	.imgspan2{
		 transform:rotate3d(0,1,0,-180deg);
	    -ms-transform:rotate3d(0,1,0,-180deg);	/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,-180deg);	/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,-180deg); /* Safari 和 Chrome */
	    -o-transform:rotateY(0,1,0,-180deg);	/* Opera */
	    z-index: 8;
	}
	.imgspan3{
		 transform:rotate3d(0,1,0,-180deg);
	    -ms-transform:rotate3d(0,1,0,-180deg);	/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,-180deg);	/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,-180deg); /* Safari 和 Chrome */
	    -o-transform:rotateY(0,1,0,-180deg);	/* Opera */
	    z-index: 8;
	}
	.back1{
	    transform:rotate3d(0,1,0,-180deg);
	    -ms-transform:rotate3d(0,1,0,-180deg);	/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,-180deg);	/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,-180deg); /* Safari 和 Chrome */
	    -o-transform:rotateY(0,1,0,-180deg);	/* Opera */
	    z-index: 8;
	}
	.back2{
	    transform:rotate3d(0,1,0,-180deg);
	    -ms-transform:rotate3d(0,1,0,-180deg);	/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,-180deg);	/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,-180deg); /* Safari 和 Chrome */
	    -o-transform:rotateY(0,1,0,-180deg);	/* Opera */
	    z-index: 8;
	}
	.back3{
	    transform:rotate3d(0,1,0,-180deg);
	    -ms-transform:rotate3d(0,1,0,-180deg);	/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,-180deg);	/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,-180deg); /* Safari 和 Chrome */
	    -o-transform:rotateY(0,1,0,-180deg);	/* Opera */
	    z-index: 8;
	}
	
	.card-flipped{
	    transform:rotate3d(0,1,0,180deg);
	    -ms-transform:rotate3d(0,1,0,180deg);/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,180deg);/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,180deg);/* Safari 和 Chrome */
	    -o-transform:rotate3d(0,1,0,180deg);	/* Opera */
	    z-index: 8;
	}
	.card-flipped1{
	    transform:rotate3d(0,1,0,180deg);
	    -ms-transform:rotate3d(0,1,0,180deg);/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,180deg);/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,180deg);/* Safari 和 Chrome */
	    -o-transform:rotate3d(0,1,0,180deg);	/* Opera */
	    z-index: 8;
	}
	.card-flipped2{
	    transform:rotate3d(0,1,0,180deg);
	    -ms-transform:rotate3d(0,1,0,180deg);/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,180deg);/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,180deg);/* Safari 和 Chrome */
	    -o-transform:rotate3d(0,1,0,180deg);	/* Opera */
	    z-index: 8;
	}
	.card-flipped3{
	    transform:rotate3d(0,1,0,180deg);
	    -ms-transform:rotate3d(0,1,0,180deg);/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,180deg);/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,180deg);/* Safari 和 Chrome */
	    -o-transform:rotate3d(0,1,0,180deg);	/* Opera */
	    z-index: 8;
	}
	.card-flipped .front{
	    transform:rotate3d(0,1,0,180deg);
	    -ms-transform:rotate3d(0,1,0,180deg);/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,180deg);/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,180deg);/* Safari 和 Chrome */
	    -o-transform:rotate3d(0,1,0,180deg);	/* Opera */
	    z-index: 8;
	}
	.card-flipped1 .front1{
	    transform:rotate3d(0,1,0,180deg);
	    -ms-transform:rotate3d(0,1,0,180deg);/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,180deg);/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,180deg);/* Safari 和 Chrome */
	    -o-transform:rotate3d(0,1,0,180deg);	/* Opera */
	    z-index: 8;
	}
	.card-flipped2 .front2{
	    transform:rotate3d(0,1,0,180deg);
	    -ms-transform:rotate3d(0,1,0,180deg);/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,180deg);/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,180deg);/* Safari 和 Chrome */
	    -o-transform:rotate3d(0,1,0,180deg);	/* Opera */
	    z-index: 8;
	}
	.card-flipped3 .front3{
	    transform:rotate3d(0,1,0,180deg);
	    -ms-transform:rotate3d(0,1,0,180deg);/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,180deg);/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,180deg);/* Safari 和 Chrome */
	    -o-transform:rotate3d(0,1,0,180deg);	/* Opera */
	    z-index: 8;
	}
	.card-flipped .back{
	    transform:rotate3d(0,1,0,0deg);
	    -ms-transform:rotate3d(0,1,0,0deg);/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,0deg);/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,0deg);/* Safari 和 Chrome */
	    -o-transform:rotate3d(0,1,0,0deg);	/* Opera */
	    z-index: 10;
	}
	.card-flipped .back{
	    transform:rotate3d(0,1,0,0deg);
	    -ms-transform:rotate3d(0,1,0,0deg);/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,0deg);/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,0deg);/* Safari 和 Chrome */
	    -o-transform:rotate3d(0,1,0,0deg);	/* Opera */
	    z-index: 10;
	}
	.card-flipped1 .back1{
	    transform:rotate3d(0,1,0,0deg);
	    -ms-transform:rotate3d(0,1,0,0deg);/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,0deg);/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,0deg);/* Safari 和 Chrome */
	    -o-transform:rotate3d(0,1,0,0deg);	/* Opera */
	    z-index: 10;
	}
	.card-flipped2 .back2{
	    transform:rotate3d(0,1,0,0deg);
	    -ms-transform:rotate3d(0,1,0,0deg);/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,0deg);/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,0deg);/* Safari 和 Chrome */
	    -o-transform:rotate3d(0,1,0,0deg);	/* Opera */
	    z-index: 10;
	}
	.card-flipped3 .back3{
	    transform:rotate3d(0,1,0,0deg);
	    -ms-transform:rotate3d(0,1,0,0deg);/* IE 9 */
	    -moz-transform:rotate3d(0,1,0,0deg);/* Firefox */
	    -webkit-transform:rotate3d(0,1,0,0deg);/* Safari 和 Chrome */
	    -o-transform:rotate3d(0,1,0,0deg);	/* Opera */
	    z-index: 10;
	}
	.van-nav-bar {
		/*background: linear-gradient(blue, pink);*/
		/*background: linear-gradient(to right, #FF6348,#ff755d,  #FFC267)*/
		position: fixed;
		top: 0rem;
		width: 100%;
	}
	.chag{
	    font-size:1.25rem ;
	    text-align: center;
	    color: rgba(159, 1, 17, 1);
	    padding-bottom: 0.9375rem;
	}
	.beshu{
	    display: flex;
	    justify-content: space-between;
	    padding: 0rem 1.25rem;
	}
	.beshumoney{
	    display: flex;
        justify-content: space-between;
        padding: 0rem 1.25rem;
        font-size: 0.875rem;
        color: rgba(166, 166, 166, 1);
        margin-top: 0.625rem;
	}
	.beshumoney p:nth-of-type(2){
	    color: rgba(88, 88, 103, 1);
	    font-size: 0.875rem;
	}
	.beshu p:nth-of-type(1){
	    font-size: 0.875rem;
	    line-height: 1.9375rem;
	    color: rgba(166, 166, 166, 1);
	}
	.doublespan{
	    width: 21.375rem;
	    height: 9.0625rem;
	    margin: 0 auto;
	    background: url(../images/doublejoy/bou3@2x.png) no-repeat left top;
	    background-size:100% 100% ;
	    display: flex;
	    justify-content: space-between;
	    padding: 0rem 0.625rem;	    
	}
	.chanbottom{
	    display: flex;
	    justify-content: space-between;
	    padding: 0rem 1.25rem;
	    font-size: 0.875rem;
	    margin-bottom: 0.925rem;
	}
	.chanbottom p:nth-of-type(2){
	   
	    border: 0.03125rem solid rgba(242, 241, 247, 1);
	}
	.chanbottom p span:nth-of-type(1){
	   padding-right: 4.875rem; 
	   color: rgba(166, 166, 166, 1);
	}
	.texcenterpp{
	    padding: 0.9375rem 0rem;
	}
	.doublespan span{
	    width: 4.375rem;
	    height: 6.53125rem;
	    display: inline-block;
	    margin-top: 1.25rem;
	    background: url(../images/doublejoy/bou8@2x.png) no-repeat left top;
	    background-size:100% 100% ;
	}
	.doublespanbotm span{
	    font-size: 0.875rem;
	    color: rgba(88, 88, 103, 1);
	    display: inline-block;
	}
	.doublespanbotm span:nth-of-type(2){
        margin-top: 0.325rem;
        color: rgba(159, 1, 17, 1);
    }
	
	.doublecenter{
	    text-align: center;
	    font-size: 0.9375rem;
	    color: rgba(166, 166, 166, 1);
	    margin-bottom: 0.8125rem;
	}
	.doublecen{
	   display: flex;
        justify-content: space-between;
        padding: 0rem 1.25rem; 
       
	}
	.texcenter{
	    display: flex;
	    justify-content: space-between;
	    padding: 0rem 1.25rem;
	    margin-bottom: 1rem;
	}
	.doulistp{
	   display: flex;
        justify-content: space-between;
        padding: 0rem 1.25rem;  
        margin-bottom: 0.75rem;     
	}
	.doulistp span:nth-of-type(1){
	    font-size: 0.875rem;
	    font-weight: 600;
	    color: rgba(88, 88, 103, 1);
	     }
	 .doulistp span:nth-of-type(2){
        font-size: 0.75rem;
        color: rgba(88, 88, 103, 1);
         }
	.texcenter p:nth-of-type(1){
	    font-size: 0.875rem;
	    color: rgba(88, 88, 103, 1);
	    font-weight: 600;
	}
	.texcenter p:nth-of-type(2){
        font-size: 0.75rem;
        color: rgba(159, 1, 17, 1);
        border: 0.03125rem solid rgba(159, 1, 17, 1);
        padding: 0.15625rem 0.6125rem;
        border-radius:0.6125rem ;
    }
	.doublebottom{
	     width: 21.375rem;
        height: 3.425rem;
        margin: 0rem auto;
        background: url(../images/doublejoy/bou55@2x.png) no-repeat left top;
        background-size:100% 100% ;
        text-align: center;
        font-size: 1rem;
        color: #fff;
        line-height:3.425rem ;
	}
	.double{
	    width: 21.375rem;
	    height: 6.875rem;
	    background: url(../images/doublejoy/bou@2x.png) no-repeat left top;
	    background-size:100% 100% ;
	    margin: 1rem auto 1rem auto;
	    border-radius:0.325rem ;
	    
	    color: #fff;
	}
	.double h3{
	    font-size: 1rem;
	    padding-top: 2.0625rem;
	    padding-left: 1.5625rem;
	    padding-bottom: 0.5rem;
	}
	.doubleimg{
	    width: 4.375rem;
	    height: 6.5rem;
	    margin: 1.0625rem auto 0 auto;
	}
	.double p span{
	  
	   display: inline-block;
	  padding-left: 1.5625rem;
	   font-size: 0.875rem;
	   color: rgba(197, 199, 210, 1);
	   border-radius:0.625rem ;
	   margin-top: 0.325rem;
	}
	.double img{
	    width:100% ;
	    height: 100%;
	}
	.van-nav-bar__text{
	    color: #333;
	}
	.registercen{
		padding: 0rem 1rem;
		text-align: left;
		line-height: 1.875rem;
		font-size: 0.8125rem;
		color: rgba(166, 166, 166, 1);
	}
	.van-nav-bar__title {
		color: #333;
	}
	.van-nav-bar .van-icon{
		color: #333;
	}
</style>